<template>
<div style="padding-bottom:100px;">

  <div style="position:sticky;top:0;left:0;z-index: 999;">
    <van-nav-bar
        title="购物车"
    >
    </van-nav-bar>
  </div>

  <van-cell ><van-checkbox v-model="checked">删除管理</van-checkbox></van-cell>
<!--  提示框-->
  <div class="car" v-if="this.$store.state.cart.cartList.length==0"><img src="../assets/cart.gif" alt=""></div>
  <!-- 购物车商品列表 -->
  <van-row type="flex" style="overflow: hidden;margin-top:10px" justify="space-between" v-for="(item,index) in this.$store.state.cart.cartList">
    <van-col span="3">
      <van-checkbox v-model="item.ShopSelect"></van-checkbox>
    </van-col>
    <van-col span="18">
      <!-- 商品列表 -->
      <van-card
          :num="item.selectedNum"
          :price="parseInt(item.selectedSkuComb.price/100).toFixed(2)"
          desc="软件测试数据"
          :title="item.name"
          :thumb="item.img"
      >
        <template #footer>
          <van-row type="flex" justify="end">
            <van-col span="8" style="text-align:center;">小计:<span style="color: red;line-height: 28px">{{parseInt(item.selectedSkuComb.price/100)*item.selectedNum}}</span></van-col>
            <van-col span="1"></van-col>
            <van-col span="8" class="addclass">
              <span @click="setNumber(index,-1)">-</span>
              <span>{{item.selectedNum}}</span>
              <span @click="setNumber(index,1)">+</span>
            </van-col>
          </van-row>
        </template>
      </van-card>
    </van-col>
    <van-col span="3" >
      <!-- 右滑进入 -->
      <transition name="van-slide-right">
        <div v-show="checked"><div @click="removeShop(index)" class="reovm">删除</div></div>
      </transition>
    </van-col>
  </van-row>

  <!-- 推荐商品列表 -->
  <van-list class="addcar">
    <div style="position:sticky;top:0;left:0;z-index: 999;">
      <van-nav-bar title="相关推荐">
      </van-nav-bar>
    </div>
    <van-card v-for="(item,index) in list" :key="item.goods_id"
              @click="setShopId(item,item.goods_id)"
              :num="item.goods_number"
              :price="item.goods_price"
              desc="软件测试数据！"
              :title="item.goods_name"
              :thumb="item.goods_big_logo==''?'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg':item.goods_big_logo"
    />
  </van-list>

<!--  提交订单-->
  <van-submit-bar :price="car.CkeckedPrice" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="car.AllCkecked" @click="setAllCkecked(car.AllCkecked)">全选</van-checkbox>
    <template #tip v-if="Bool.flag">
      你的默认收货地址还没设置,请前往设置！<span @click="onClickEditAddress">修改地址</span>
    </template>
  </van-submit-bar>
</div>
</template>
<script>
import request from "../api/request";
import {Toast} from "vant";
export default {
  name: "car",
  data() {
    return {
      checked:false,
      flag:false,
      radio:false,
      list: [],
      loading: false,
      finished: false,
    }
  },
  created() {
    this.getdata()
  },
  computed:{
    car(){
      return this.$store.getters["cart/shopAtter"]
    },
    Bool(){
      return  this.$store.getters["address/Bool"]
    }
  },
  methods: {
    setShopId(item,id){
      this.$store.commit('footprint/setfootprint',item);//添加到我的足迹
      this.$router.push({
        path:`/details/${id}`,
      })
    },

    //推荐商品列表
    getdata(){
      request.get('/goods/search').then(res=>{
        let {goods}=res.data.message
          for(var i=0;i<20;i++){
            this.list.push(goods[i])
          }
      })
    },


    //全选按钮控制单选
    setAllCkecked(Bool){
      this.$store.commit('cart/setAllCkecked',Bool)
    },
    //商品删除功能
    removeShop(index){
        this.$store.commit('cart/removeShop',index)
    },
    setNumber(index,num){
      this.$store.commit('cart/setNumber',{index,num})
    },
    //提交订单
    onSubmit(){
      if(this.$store.state.cart.cartList.length==0){
        Toast('请购买商品！')
        return
      }
      this.$router.push('/order')
    },
    //修改地址
    onClickEditAddress(){
      this.$router.push('/address')
    }
  },
}
</script>

<style scoped lang="less">
.reovm{height:100%;background: red;text-align: center;color: #fafafa;line-height: 132px}
.van-row{background: #fafafa}
.van-col{position: relative}
.van-col>.van-checkbox{position:absolute;top:50%;left: 50%;transform:translateX(-50%)translateY(-50%)}
.van-submit-bar{bottom:50px}
.van-card__price{font-size:14px}
.addclass{overflow: hidden;font-size:14px;border: 1px #ccc solid;border-radius:10px;text-align: center;display: flex;justify-content: space-around;line-height: 26px}
.addclass span:nth-child(2){background:white;width:20%;padding:0 6px}
.addclass span:nth-child(1){background: #fafafa;width:40%}
.addclass span:nth-child(3){background: #fafafa;width:40%}
.car{width: 100%;height:300px;img{width:100%}}
</style>